<template>
    <ul class="detail-bottom">
        <li class="bottom-top" @click="selectAllMusic">
            <div class="bottom-icon"></div>
            <div class="bottom-title">播放全部</div>
        </li>
        <li v-for="value in playlist" :key="value.id" class="item" @click="detailShow(value.id)">
            <h3>{{value.name}}</h3>
            <p>{{value.al.name}} - {{value.ar[0].name}}</p>
        </li>
    </ul>
</template>

<script>
// 从vuex导入 { mapActions } 在methods方法中映射actions方法
import { mapActions } from 'vuex'
export default {
  name: 'Detailbottom',
  props:{
      playlist:{
        type:Array,
        default:()=>[],
        required:true
      }
  },
  methods: {
      ...mapActions([
        'setFullScreent',
        'setMiniPlayer',
        'setSongDetail'
      ]),
      detailShow(id){
          // dispatch 方法触发会找到 actions 中的方法, actions 方法中的 commit 会找到 mutations 中的方法触发
        //   this.$store.dispatch('setFullScreent', true)
        this.setFullScreent(true)
        this.setMiniPlayer(false)
        this.setSongDetail([id])
      },
      selectAllMusic(){
          this.setFullScreent(true)
          this.setMiniPlayer(false)
          // 将playlist中的id用map筛选出来
          let ids = this.playlist.map((item)=>{
              return item.id
          })
        //   console.log(ids);
          this.setSongDetail(ids)
      }
  },
}
</script>

<style scoped lang="scss">
@import '../../assets/css/variable.scss';
@import '../../assets/css/mixin.scss';
.detail-bottom{
    width: 100%;
    li{
        width: 100%;
        height: 100px;
        padding: 15px;
        box-sizing: border-box;
        border-bottom: 1px solid #ccc;
        @include bg_sub_color()
    }
    .bottom-top{
        display: flex;
        align-items: center;
        border-top-left-radius: 50px;
        border-top-right-radius: 50px;
        .bottom-icon{
            width: 60px;
            height: 60px;
            @include bg_img('../../assets/images/small_play');
            margin-right: 20px
        }
        .bottom-title{
            @include font-color();
            @include font-size($font_large)
        }
    }
    .item{
        h3{
            @include font-color();
            @include font-size($font_medium);
        }
        p{
            @include font-color();
            @include font-size($font_samll);
            margin-top: 5px;
            opacity: 0.6;
        }
    }
}
</style>
